<template>
    <el-card shadow="never" class="!border-none">
        <el-page-header :content="id ? '编辑服务' : '新增服务'" @back="$router.back()" />
    </el-card>

    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" class="demo-formData">
        <el-card class="!border-none" shadow="never" body-style="padding: 0" style="margin-top: 15px">
            <el-tabs v-model="activeName">
                <!-- 基础设置 -->
                <el-tab-pane label="基础设置" name="base_setting">
                    <base-setting v-model="formData"></base-setting>
                </el-tab-pane>

                <!-- 服务详情 -->
                <el-tab-pane label="服务详情" name="service_detail">
                    <div class="xl:flex">
                        <editorVue v-model="formData.content" width="640" height="664"></editorVue>
                        <div class="detail ml-[30px]">
                            <div class="title">- 服务详情 -</div>
                            <div class="p-[0.6rem] break-words" v-html="formData.content"></div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </el-form>

    <footer-btns>
        <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
    </footer-btns>
</template>

<script lang="ts" setup>
import {
    apiServiceAdd,
    apiServiceEdit,
    apiServiceDetail,
} from "@/api/service/lists";
import { ref } from "vue";
import baseSetting from "./components/base-setting.vue";
import editorVue from "@/components/editor/index.vue";
import FooterBtns from "@/components/footer-btns/index.vue";
import type { ElForm } from "element-plus";
import feedback from "@/utils/feedback";

interface formDataObj {
    name?: string;
    remarks?: string;
    categoryId?: string;
    image: Array<string>;
    price?: string;
    scribingPrice?: string;
    integral?: string;
    unitId?: string;
    status?: number;
    content?: string;
    sort?: string | number;
    outNumber?: string | number;
    carousel: string | number;
    isManualDispatch: string | number;
    isBuy: string | number;
    buyStartTime: number;
    buyPeopleNum: number;
    buyNumber: number;
}
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();

const route = useRoute();
const router = useRouter();
const id: any = route.query.id;

// 切换索引
const activeName = ref<string>("base_setting");
// 表单数据
const formData = ref<formDataObj>({
    name: "",
    remarks: "",
    categoryId: "",
    image: [],
    price: "",
    scribingPrice: "",
    integral: "",
    unitId: "",
    status: 0,
    content: "",
    sort: "",
    outNumber: "",
    carousel: 0,
    isManualDispatch: 0,
    isBuy: 0,
    buyStartTime: 1,
    buyPeopleNum: 2,
    buyNumber: 0,
});

// 表单校验规则
const rules = ref<object>({
    name: [{ required: true, message: "请输入服务名称", trigger: "blur" }],
    categoryId: [{ required: true, message: "请选择分类", trigger: "change" }],
    image: [{ required: true, message: "请上传轮播图", trigger: "change" }],
    price: [{ required: true, message: "请输入价格", trigger: "blur" }],
    unitId: [{ required: true, message: "请选择单位", trigger: "change" }],
    status: [{ required: true, message: "请选择商品状态", trigger: "change" }],
    integral: [
        { required: true, message: "请选择输入服务积分", trigger: "change" },
    ],
});

// 获取详情
const getServiceDetail = async (): Promise<void> => {
    const res = await apiServiceDetail({ id });
    console.log("res", res.image);
    (formData.value as any) = res;
    formData.value.image = res.goodsImageList;
};

// 添加
const handleServiceAdd = async (): Promise<void> => {
    const str = formData.value.image.join(",");
    if (formData.value.sort < 0) return feedback.msgError("排序必须为纯数字");
    if (formData.value.price < 0)
        return feedback.msgError("价格必须大于或等于零");
    await apiServiceAdd({ ...formData.value, image: str });
    router.back();
    feedback.msgSuccess("操作成功");
};

// 编辑
const handleServiceEdit = async (): Promise<void> => {
    const str = formData.value.image.join(",");
    if (formData.value.sort < 0) return feedback.msgError("排序必须为纯数字");
    if (formData.value.price < 0)
        return feedback.msgError("价格必须大于或等于零");
    await apiServiceEdit({ ...formData.value, image: str });
    router.back();
    feedback.msgSuccess("操作成功");
};

// 提交
const onSubmit = (formEl: FormInstance | undefined): void => {
    if (!formEl) return;
    formEl.validate((valid): boolean | undefined => {
        if (!valid) {
            activeName.value = "base_setting";
            return false;
        }
        if (!id) handleServiceAdd();
        else handleServiceEdit();
    });
};

if (id) getServiceDetail();
</script>

<style lang="scss">
.el-tabs__header {
    padding: 0 20px;
    border-bottom: 1px solid #e5e5e5;
}

.el-tabs__content {
    padding: 20px;
}

.detail {
    width: 375px;
    height: 662px;
    overflow: auto;
    border: 1px solid #e5e5e5;

    .title {
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e5e5e5;
    }
}
</style>
